<template>
  <div>
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <div slot="header">
        <span>
          <img src="/static/logo.png" alt>随堂问卷管理系统-{{paper.title}}
        </span>
      </div>
    </el-card>
    <el-card v-for="(p,index) in paper.content" :key="'p_'+index">
        <div slot="header">
            {{index+1}}、<span >{{p.outline_name}}</span>
        </div>
        <el-radio-group v-model="p.answer">
            <el-radio  :label="item.id" v-for="item in paper.item" :key="'item_'+item.id">{{item.item_name}}</el-radio>
        </el-radio-group>  
        
    </el-card>
    <div>
        <qrcode :value="msg" :options="{ width: 200 }"></qrcode>
        <el-button type="primary" @click="sub()">提交</el-button>   
    </div>
  </div>
</template>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode';
export default {
    components:{
        'qrcode':VueQrcode
    },
  props: ["id"],
  data(){
      return{
          paper:{}
      }
  },
  created(){
      this.getpaper()
  },
  computed:{
      msg(){
          let tmp={
              url:`${this.apiURL}/papers/${this.id}`,
              id:this.id
          }
          return JSON.stringify(tmp)
      }
  },
  methods:{
      sub(){
          for(var i=0;i<this.paper.content.length;i++){
              if(!this.paper.content[i].answer){
                  this.$message.error(`请选择选项${i+1}`)
                  return
              }
          }
          this.axios.post('/answers/add',{
              paper_id:this.id,
              content:JSON.stringify(this.paper.content),
              item:JSON.stringify(this.paper.item) 
          }).then(()=>{
              console.log('success')
              this.$message.success('提交成功')
          }).catch(()=>{
              this.$message.error('请勿重复作答')
          })
      },
     async getpaper(){
     const ret=  await this.axios.get(`/papers/${this.id}`)
     this.paper=ret.data.data
     
    },
  }
};
</script>

<style>
</style>
